import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { segmentGroupDefaultProps } from './defaultProps';
import type { SegmentGroupOptions } from './type';

export interface SegmentGroupProps extends SegmentGroupOptions, HTMLAttributes<HTMLDivElement> {}

const SegmentGroup: FC<SegmentGroupProps> = (props) => {
  const {
    className,
    basic,
    horizontal,
    equal,
    stackable,
    raised,
    stacked,
    piled,
    compact,
    children,
    forwardedRef,
    ...segmentGroupProps
  } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        { basic, horizontal, equal, width: equal, stackable, raised, stacked, piled, compact },
        'segments',
        className,
      ),
      ...segmentGroupProps,
    },
    children,
  );
};

SegmentGroup.displayName = 'SegmentGroup';
SegmentGroup.defaultProps = segmentGroupDefaultProps;

export default SegmentGroup;
